<template>
	<view class="surrender">
		<form>
			<label for="bankName">银行名称:</label>
			<input type="text" id="bankName" v-model="surrenderInfo.bankName" placeholder="请输入">
			<br>
			<label for="bankCard">银行卡号:</label>
			<input type="text" id="bankCard" v-model="surrenderInfo.bankCard" placeholder="请输入">
			<br>
			<label for="bankBranch">开户行:</label>
			<input type="text" id="bankBranch" v-model="surrenderInfo.bankBranch" placeholder="请输入">
			<br>
			<label for="bankPhone">开户手机号:</label>
			<input type="tel" id="bankPhone" v-model="surrenderInfo.bankPhone" placeholder="请输入">
			<br>
			<label for="bankUser">开户人:</label>
			<input type="text" id="bankUser" v-model="surrenderInfo.bankUser" placeholder="请输入">
			<br>
			<label for="contractId">开户人身份证号:</label>
			<input type="text" id="contractId" v-model="surrenderInfo.contractId" placeholder="请输入">
			<button type="button" @click="submit">提交</button>
		</form>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';

	const surrenderInfo = reactive({
		bankName: '', // 银行名称
		bankCard: '', // 银行卡号
		bankBranch: '', // 开户行
		bankPhone: '', // 开户手机号
		bankUser: '', // 开户人
		contractId: '' // 开户人身份证号
	});

	const submit = () => {
		console.log(surrenderInfo); // 这里可以添加提交表单数据的逻辑
		uni.navigateTo({
			url: "/pages/prompt/prompt?msg=退租已提交"
		});
	};
</script>

<style scoped>
	.surrender {
		max-width: 600px;
		margin: 0 auto;
		padding: 20px;
		background-color: #f8f9fa;
		border: 1px solid #dee2e6;
		border-radius: 5px;
	}

	.user_avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	form {
		display: flex;
		flex-direction: column;
		
	}

	label {
		margin-top: 10px;
		font-size: 14px;
	}

	input {
		height: 35px;
		margin-top: 5px;
		text-indent: 1em;
		border: 1px solid #ced4da;
		border-radius: 5px;
		font-size: 14px;
	}

	button {
		margin-top: 20px;
		background-color: #007bff;
		color: white;
		border: none;
		font-size: 14px;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	button:hover {
		background-color: #0056b3;
	}
</style>